<template>
  <el-dialog v-model="show" title="添加酒店" width="1100px" append-to-body :close-on-click-modal="false">
    <el-form ref="queryRef" :model="queryParams" :inline="true">
      <el-form-item label="酒店名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入酒店名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="星级" prop="starLevel">
        <el-select v-model="queryParams.starLevel" placeholder="请选择酒店星级" clearable @change="handleQuery">
          <el-option label="一星" value="1" />
          <el-option label="二星" value="2" />
          <el-option label="三星" value="3" />
          <el-option label="四星" value="4" />
          <el-option label="五星" value="5" />
          <el-option label="六星" value="6" />
          <el-option label="七星" value="7" />
        </el-select>
      </el-form-item>
      <el-form-item label="地点" prop="regionId">
        <el-cascader
          v-model="queryParams.regionId"
          :options="regionsList"
          :props="{ label:'text',checkStrictly:true}"
          clearable
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="hotelList" row-key="id" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" :selectable="selectable" />
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column label="酒店图片" width="100" align="center" prop="photos">
        <template #default="scope">
          <el-image style="width: 40px;height: 40px" :src="scope.row.photos.split(',')[0]" :preview-src-list="scope.row.photos.split(',')" />
        </template>
      </el-table-column>
      <el-table-column label="酒店名称" align="center" prop="name" />
      <el-table-column label="地点" align="center" prop="addName" :show-overflow-tooltip="true" />
      <el-table-column label="星级" align="center" prop="starLevel">
        <template #default="scope">
          {{ starLevelArr[scope.row.starLevel] }}
        </template>
      </el-table-column>
      <el-table-column label="入住时间" align="center" prop="checkInTime" />
      <el-table-column label="离店时间" align="center" prop="checkOutTime" />
      <el-table-column label="电话" align="center" prop="contact" width="120" />
      <el-table-column label="标签" align="center" prop="label" :show-overflow-tooltip="true" min-width="150" />
    </el-table>

    <pagination
      v-show="total>0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />

    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="sure">确 定</el-button>
        <el-button @click="show=false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import { getCurrentInstance, ref, toRefs, watch } from 'vue'
import { reactive } from '@vue/runtime-core'
import { listHotel } from '@/api/logex/hotel'
import { computed } from '@vue/reactivity'
import useUserStore from '@/store/modules/user'
import { addHotelToMatch, getMatchHotel } from '@/api/logex/activity'
import _ from 'lodash'


const emit = defineEmits(['complete'])
const { proxy } = getCurrentInstance()

let matchId = null

const show = ref(false)
const hotelList = ref([])
const loading = ref(true)
const total = ref(0)
const ids = ref([])
const chooseHotels = ref([])

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    starLevel: undefined,
    regionId: undefined,
    province: undefined,
    city: undefined,
    area: undefined,
    contact: undefined,
    label: undefined,
    status: '1'
  }
})

const { queryParams } = toRefs(data)

const starLevelArr = ['零星', '一星', '二星', '三星', '四星', '五星', '六星', '七星']
const regionsList = computed(() => useUserStore().regionsList)

watch(show, (val) => {
  if (!val) {
    queryParams.value = {
      pageNum: 1,
      pageSize: 10,
      name: undefined,
      starLevel: undefined,
      regionId: undefined,
      province: undefined,
      city: undefined,
      area: undefined,
      contact: undefined,
      label: undefined,
      status: '1'
    }

    hotelList.value = []
    total.value = 0
    ids.value = []
    matchId = null
  }
})

function getList() {
  loading.value = true

  if (queryParams.value.regionId) {
    queryParams.value.province = queryParams.value.regionId[0]
    queryParams.value.city = queryParams.value.regionId[1]
    queryParams.value.area = queryParams.value.regionId[2]
  } else {
    queryParams.value.province = null
    queryParams.value.city = null
    queryParams.value.area = null
  }

  listHotel(queryParams.value).then(response => {
    hotelList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
}


function sure() {
  if (ids.value.length === 0) {
    proxy.$modal.msgWarning('请选择酒店')
    return
  }

  addHotelToMatch({
    activityId: matchId,
    hotelIds: ids.value.join(',')
  }).then((res) => {
    proxy.$modal.msgSuccess(res.msg)
    show.value = false
    emit('complete', matchId)
  })
}

function selectable(row) {
  return !_.some(chooseHotels.value, (h) => {
    return h.hotelId === row.id
  })
}

function open(params) {
  show.value = true
  matchId = params.matchId
  getList()

  chooseHotels.value = []
  getMatchHotel({
    activityId: matchId
  }).then(res => {
    chooseHotels.value = res.rows
  })
}
defineExpose({
  open
})

</script>

<style scoped>

</style>
